<template>
	<view class="collect">
		<view class="title">收藏</view>
		<view class="list" v-if="arr.length != 0">
			<view class="li" v-for="(item,index) in arr">
				<view class="left">
					<text>{{index + 1}}</text> .
					<text>{{item}}</text>
				</view>
				<view class="right">
					<image class="icon" src="../../static/i-star-on.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="msg" v-else>暂无收藏数据~~</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: ['test','word','show']
			};
		}
	}
</script>

<style lang="scss">
.collect {
	padding: 20rpx 30rpx;
}
.collect .title {
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
}
.collect .list .li {
	padding: 30rpx 10rpx;
	border-bottom: 2rpx solid #ccc;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.collect .list .li .icon {
	width: 40rpx;
	height: 40rpx;
	vertical-align: middle;
	margin-left: 30rpx;
}
.msg {
	text-align: center;
	color: #666;
	padding: 100rpx 0;
}
</style>
